<template>
  <el-row :gutter="40">
    <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
      <el-row :gutter="40" style="margin-left: 20px; margin-right: 0px">
        <el-col :lg="4" :xs="6">
          <el-form-item label="状态" style="width: 100%">
            <el-select v-model="queryParams.status" clearable placeholder="请选择终端状态" style="width: 100%">
              <el-option v-for="item in terminalStatusData.filter(a=>a.value === '4' || a.value === '5')" :key="item.id"
                         :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :xs="6">
          <el-form-item label="终端类型" style="width: 100%">
            <el-select v-model="queryParams.terminalType" clearable placeholder="请选择终端类型" style="width: 100%">
              <el-option v-for="item in terminalData.filter(a=>a.value !== 'all')" :key="item.id" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :xs="6">
          <el-form-item label="终端所在地" style="width: 100%">
            <el-cascader v-model="value" :options="cityList" :popper-append-to-body="false" :props="{ value:'regionCode',label:'regionName', expandTrigger: 'hover' }"
                         placeholder="请选择终端所在地区" style="width:100%"
                         @change="handlCity"/>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :xs="6">
          <el-form-item label="营销区域" style="width: 100%">
            <el-cascader v-model="saleValue" :options="salesArea" :popper-append-to-body="false" :props="{checkStrictly: true, value:'id',label:'salesAreaName' }"
                         placeholder="请选择终端所属营销区域" style="width:100%"
                         @change="handlArea"/>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :xs="6">
          <el-form-item label="关键字" style="width: 100%">
            <el-input v-model="queryParams.selectStr" clearable placeholder="输入编号、名称、地区、详细地址"/>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :xs="6">
          <el-form-item style="width: 100%">
            <el-button class="border-btn" @click="handlReset">重置
            </el-button>
            <el-button class="main-btn" type="primary" @click="handlSearch">搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-row>
  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="medium"
              @sort-change="handlSort" @row-click="aloneClick">
    <el-table-column :min-width="140" :show-overflow-tooltip="true" header-align="center" label="终端编号"
                     prop="terminalNo"/>

    <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="终端名称"
                     prop="terminalName"/>

    <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="终端类型" prop="terminalType">
      <template #default="{row}">
        {{ getLabel('app_mode', row.terminalType) }}
      </template>
    </el-table-column>

    <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="所在地区" prop="tags">
      <template #default="{row}">
        {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
      </template>
    </el-table-column>

    <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="详细地址" prop="address"/>

    <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="所属营销区域"
                     prop="saleAreaName"/>

    <el-table-column :min-width="180" :show-overflow-tooltip="true" align="center" label="创建时间" prop="createdAt"
                     sortable="custom">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>

    <el-table-column :min-width="140" :show-overflow-tooltip="true" align="center" label="状态" prop="terminalStatus">
      <template #default="{row}">
        <div style="line-height: 20px">{{ getLabel('trading_terminal', row.terminalStatus) }}</div>
        <div v-if="row.ifWaitQualifications === 1" class="flow-status-color" style="line-height: 20px">
          [待完善资质]
        </div>
      </template>
    </el-table-column>
  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page"
              :total="total" style="display: flex; justify-content: flex-end" @pagination="handlList"/>
  <rule-form ref="ruleFormDialog" :type-str="typeStr" @succsess="succsess"/>
  <registered ref="registeredDialog"/>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";
import {crmStore} from "@CRM/store";
import area from "@/utils/area";

export default {
  name: "Index",
  components: {
    ruleForm: defineAsyncComponent(() => import("../modules/ruleForm.vue")),
    registered: defineAsyncComponent(() => import("../modules/registered.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    var data = reactive({
      tableData: [],
      total: 0,
      queryParams: {
        statusType: 2,
        terminalType: "",
        status: "",
        provinceCode: [],
        cityCode: [],
        areaCode: [],
        saleAreaId: 0,
        selectStr: "",
        pageSize: 20,
        page: 1,
        createdSort: "",
      },
      value: [],
      saleValue: [],
      terminalData: crmStore.getters["dictionary/getDictionary"]["app_mode"] || [],
      terminalStatusData:
          crmStore.getters["dictionary/getDictionary"]["trading_terminal"] || [],
      salesArea: [],
      cityList: area,
      typeStr: "",
      ruleFormDialog: null,
      registeredDialog: null,
    });

    const handlSalesArea = () => {
      api.terminal.TERMINAL_TREE().then((res) => {
        if (res.code === 0) {
          data.salesArea = res.data;
        }
      });
    };

    const handlArea = (val) => {
      data.queryParams.saleAreaId = val[val.length - 1];
    };

    const handlCity = (val) => {
      if (val) {
        data.queryParams.provinceCode = [val[0]];
        data.queryParams.cityCode = [val[1]];
        data.queryParams.areaCode = [val[2]];
      }
    };

    // 获取列表
    const handlList = () => {
      api.terminal.TERMINAL_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 重置表格
    const handlReset = () => {
      data.queryParams = {
        statusType: 2,
        terminalType: "",
        status: "",
        provinceCode: [],
        cityCode: [],
        areaCode: [],
        saleAreaId: 0,
        selectStr: "",
        pageSize: 20,
        page: 1,
      };
      data.value = [];
      data.saleValue = [];
      handlList();
    };

    // 搜索表格
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作" || column.label === "查看文件") return;
      router.push({
        path: "/marketing/cooperationInformation/serviceTerminal/tradinglDetail",
        query: {id: row.id},
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 刷新列表
    const succsess = () => {
      handlList();
    };

    // 编辑
    const handlEdit = (id) => {
      data.typeStr = "editor";
      data.ruleFormDialog.open(id, 2);
    };

    // 注册 终端
    const handlTo = (row) => {
      data.registeredDialog.open(row, null);
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "创建时间") {
          switch (row.order) {
            case "ascending":
              data.queryParams.createdSort = "asc";
              break;
            case "descending":
              data.queryParams.createdSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    //* *******************
    onMounted(() => {
      handlList();
      handlSalesArea();
    });
    //* *******************

    return {
      ...toRefs(data),
      aloneClick,
      cellStyle,
      handlList,
      handlReset,
      handlSearch,
      handlSalesArea,
      handlArea,
      handlCity,
      succsess,
      handlTo,
      handlEdit,
      handlSort,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
